<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>基于WebGIS的湖北省扶贫产业空间分布信息系统</title>
</head>
<style>
    .condition{
        height: 50px;
        line-height: 50px;
        margin-bottom: 15px;
        display: flex;
    }
    #map{
        width: 100%;
        height: 450px;
    }
    .manage{
        position: absolute;
        top: 20px;
        right: 20px;
    }
</style>
<body>
<div id="app">
    <div></div>
    <div>
        <div class="title">基于WebGIS的湖北省扶贫产业空间分布信息系统</div>
        <div class="tabs">
            <el-tabs v-model="selected">
                <el-tab-pane label="基础查询" name="base"></el-tab-pane>
                <el-tab-pane label="空间查询" name="space"></el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="selected == 'base'" class="condition">
            <div class="el-input" style="width: 200px;">
                <input type="text" v-model="estateName" autocomplete="off" placeholder="请输入产业名称" class="el-input__inner">
            </div>
            <el-button @click="search(1)" style="height: 40px;margin-left: 20px;margin-top: 5px;">搜索</el-button>
            <el-select v-model="estateType" placeholder="请选择产业类型" style="width: 200px;margin-left: 20px;">
                <el-option
                        v-for="item in estateTypes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button @click="search(2)" style="height: 40px;margin-left: 20px;margin-top: 5px;">搜索</el-button>
            <el-button @click="clear" type="danger" style="height: 40px;margin-left: 20px;margin-top: 5px;">重置</el-button>
        </div>
        <div v-else-if="selected == 'space'" class="condition">
            <el-select v-model="county" placeholder="请选择县" style="width: 200px;">
                <el-option
                        v-for="item in countyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button @click="search(3)" style="height: 40px;margin-left: 20px;margin-top: 5px;">搜索</el-button>
            <el-select v-model="village" placeholder="请选择村镇" style="width: 200px;margin-left: 20px;">
                <el-option
                        v-for="item in villageList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button @click="search(4)" style="height: 40px;margin-left: 20px;margin-top: 5px;">搜索</el-button>
            <el-button @click="clear" type="danger" style="height: 40px;margin-left: 20px;margin-top: 5px;">重置</el-button>
        </div>
        <div>
            <div id="map"></div>
        </div>
    </div>
    <div></div>
    <div class="manage"><el-link type="primary" href="manage/index.html" target="_blank">后台数据管理</el-link></div>
</div>
</body>
<script src="index.js"></script>
</html>